<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header"></slot>
    </template>
    <!-- :column="column" -->
    <el-descriptions border :column="3">
      <el-descriptions-item
        label="身高"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ user.height ? `${user.height} CM` : '-' }}
      </el-descriptions-item>
      <el-descriptions-item
        label="体重"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ user.weight ? `${user.weight} KG` : '-' }}
      </el-descriptions-item>
      <el-descriptions-item
        label="目标体重"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >{{ user.targetWeight ? `${user.targetWeight} KG` : '-' }}
      </el-descriptions-item>
      <!-- <el-descriptions-item
        label="体型"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >标准</el-descriptions-item
      > -->
      <!-- <el-descriptions-item
        label="体脂率"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >10.5KG 标准</el-descriptions-item
      >
      <el-descriptions-item
        label="肥胖度"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >-6.2% 标准
      </el-descriptions-item>

      <el-descriptions-item
        label="脂肪重量"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
        >10.5KG 标准
      </el-descriptions-item>
      <el-descriptions-item
        label="水分"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
      >
        56.4 优</el-descriptions-item
      >
      <el-descriptions-item
        label="内脏脂肪"
        align="left"
        label-align="left"
        :label-width="labelWidth"
        :width="120"
      >
        107级标准</el-descriptions-item
      > -->
    </el-descriptions>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'

import * as UserApi from '@/api/member/user'

const { user } = defineProps<{ user: UserApi.UserVO }>()
import { useHook } from './hook'
const { matchMedia } = useHook()
const column = ref(6)
const matchType = ref('xl')
const labelWidth = ref(70)

const setColumn = () => {
  const type = matchMedia()
  matchType.value = type
  if (type == 'xs') {
    column.value = 1
  } else if (type == 'sm') {
    column.value = 3
  } else if (type == 'md') {
    column.value = 3
  } else if (type == 'lg') {
    column.value = 3
    labelWidth.value = 150
  } else if (type == 'xl') {
    column.value = 5
    labelWidth.value = 70
  }
}
window.onresize = () => {
  setColumn()
}
onMounted(() => {
  setColumn()
})
</script>
